<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" destroy-on-close @closed="$emit('closed')" align-center width="1200">
		<el-form :model="form" :rules="rules" ref="dialogForm" label-width="110px" label-position="right" style="height: 750px;">
            <el-container>
                <el-row :gutter="1">
                    <el-col :span="6">
                        <el-form-item label="客户编号" prop="apply_code">
                            <el-input v-model="info.apply_code" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="公司名称" prop="company_name">
                            <el-input v-model="info.company_name" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="对接人" prop="contacts">
                            <el-input v-model="info.contacts" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="手机号码" prop="mobile">
                            <el-input v-model="info.mobile" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="1">
                    <el-col :span="6">
                        <el-form-item label="所属酒店" prop="hotel">
                            <el-select v-model="info.hotel" placeholder="请选择所属酒店" style="width:100%" disabled>
                                <el-option v-for="item in hotelList" :key="item.id" :label="item.hotel_name" :value="item.id"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="销售" prop="salesman">
                            <el-select v-model="info.salesman" disabled placeholder="请选择销售" style="width:100%">
                                <el-option v-for="item in saletList" :key="item.id" :label="item.name" :value="item.id"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="创建时间" prop="create_time">
                            <el-input v-model="info.create_time" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="最新跟进记录" prop="update_time">
                            <el-input v-model="info.update_time" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="1">
                    <el-col :span="6">
                        <el-form-item label="最后沟通时间" prop="lasttime">
                            <el-input v-model="info.lasttime" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="6">
                        <el-form-item label="派单时间" prop="mobile">
                            <el-input v-model="info.mobile" disabled></el-input>
                        </el-form-item>
                    </el-col> -->
                </el-row>
                <el-header class="header-tabs" style="margin-bottom: 10px;">
                    <el-tabs type="card" v-model="groupId" @tab-change="tabChange">
                        <!-- <el-tab-pane label="客户详情" name="0"></el-tab-pane> -->
                        <el-tab-pane label="跟进记录" name="1"></el-tab-pane>
                        <el-tab-pane label="项目列表" name="2"></el-tab-pane>
                        <el-tab-pane label="应收账款" name="3"></el-tab-pane>
                        <el-tab-pane label="开票资料" name="4"></el-tab-pane>
                    </el-tabs>
                </el-header>
                <div v-if="groupId==1">
                    <el-row :gutter="1">
                        <el-col :span="12">
                            <el-form-item label="跟单提醒" prop="next_time">
                                <el-date-picker v-model="follow.next_time" type="date" placeholder="请选择跟单提醒" style="width: 100%;" :value-format="'YYYY-MM-DD'"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="沟通方式" prop="type" v-if="follow.is_interview==0">
                                <el-select v-model="follow.type" placeholder="请选择沟通方式" style="width:100%" clearable>
                                    <el-option label="微信" :value="1"/>
                                    <el-option label="电话" :value="2"/>
                                    <el-option label="会议" :value="3"/>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="沟通内容" prop="content">
                        <el-input v-model="follow.content" type="textarea" placeholder="1、通话时间，2、客户痛点，3、项目时间，4、签单思路(下面上传图片，只能图片)，5、限制长度1000字" clearable :rows="4" maxlength="1000" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="是否面谈" prop="is_interview">
                        <el-radio-group v-model="follow.is_interview" class="ml-4">
                            <el-radio :label="0" size="large">非面谈客户</el-radio>
                            <el-radio :label="1" size="large">面谈客户</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="附件" prop="com_file">
                        <sc-upload-file v-model="follow.com_file">
                            <el-button type="primary" size="small">上传文件</el-button>
                        </sc-upload-file>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
                    </el-form-item>
                </div>
                <div v-if="groupId==2">
                    <el-header class="header-tabs">
                        <el-tabs v-model="type" @tab-change="typeChange">
                            <el-tab-pane label="一个月内新签" name="1">
                                <template #label>
                                    <el-badge :value="headnumber.month" :max="9999" class="item">
                                        <div style="width:85px">一个月内新签</div>
                                    </el-badge>
                                </template>
                            </el-tab-pane>
                            <el-tab-pane label="全部" name="0">
                                <template #label>
                                    <el-badge :value="headnumber.total" :max="9999" class="item">
                                        <div style="width:40px">全部</div>
                                    </el-badge>
                                </template>
                            </el-tab-pane>
                        </el-tabs>
                    </el-header>
                    <el-header>
                        <div class="left-panel">
                            <el-button type="primary" icon="el-icon-plus" @click="itemAdd" v-auth="'project.add'"></el-button>
                        </div>
                    </el-header>
                    <el-main class="nopadding">
                        <scTable ref="table" row-key="id" :apiObj="project" @selection-change="selectionChange" stripe remoteSort remoteFilter border :params="query" height="460">
                            <el-table-column width="1"></el-table-column>
                            <el-table-column type="selection" width="50" reserve-selection align="center"></el-table-column>
                            <el-table-column label="项目编号" prop="project_code" align="center"></el-table-column>
                            <el-table-column label="客户名称" prop="customer.company_name" align="center"></el-table-column>
                            <el-table-column label="会议名称" prop="metting" align="center"></el-table-column>
                            <el-table-column label="项目日期" prop="project_time" align="center"></el-table-column>
                            <el-table-column label="类型" prop="type" align="center">
                                <template #default="scope">
                                    <div v-if="scope.row.type == 1">会议</div>
                                    <div v-if="scope.row.type == 2">婚礼</div>
                                    <div v-if="scope.row.type == 3">会议代收</div>
                                    <div v-if="scope.row.type == 4">会议代收+自付</div>
                                    <div v-if="scope.row.type == 5">赞助</div>
                                </template>
                            </el-table-column>
                            <el-table-column label="宴会厅" prop="banquet.banquet_name" align="center"></el-table-column>
                            <el-table-column label="推介人" prop="recommend.recommend_name" align="center"></el-table-column>
                            <el-table-column label="项目总价" prop="total_price" align="center"></el-table-column>
                            <el-table-column label="成本总额" prop="create_time" align="center"></el-table-column>
                            <el-table-column label="利润" prop="create_time" align="center"></el-table-column>
                            <el-table-column label="利润率" prop="create_time" align="center"></el-table-column>
                            <el-table-column label="是否开票" prop="is_ticket" align="center">
                                <template #default="scope">
                                    <el-switch v-model="scope.row.is_ticket" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_status" :active-value="1" :inactive-value="0"></el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column label="备注" prop="remark" align="center"></el-table-column>
                            <el-table-column label="操作" fixed="right" align="center">
                                <template #default="scope">
                                    <el-button-group>
                                        <el-button text type="primary" size="small" @click="item_table_edit(scope.row, scope.$index)" v-auth="'custom.edit'">编辑</el-button>
                                    </el-button-group>
                                </template>
                            </el-table-column>
                        </scTable>
                    </el-main>
                </div>
                <div v-if="groupId==3">
                    <el-header>
                        <div class="left-panel">
                            <el-button type="primary" icon="el-icon-plus" @click="receivableAdd" v-auth="'receivable.add'"></el-button>
                        </div>
                    </el-header>
                    <scTable ref="table" row-key="id" :apiObj="receivable" @selection-change="selectionChange" stripe remoteSort remoteFilter border :params="query" height="500">
                        <el-table-column type="selection" width="50" reserve-selection align="center"></el-table-column>
                        <el-table-column label="公司名称" prop="project.customer.company_name" align="center" width="100"></el-table-column>
                        <el-table-column label="项目编号" prop="project.project_code" align="center" width="100"></el-table-column>
                        <el-table-column label="项目名称" prop="project.metting" align="center" width="100"></el-table-column>
                        <el-table-column label="会议类型" prop="project.type" align="center" width="100">
                            <template #default="scope">
                                <div v-if="scope.row.project.type == 1">会议</div>
                                <div v-if="scope.row.project.type == 2">婚礼</div>
                                <div v-if="scope.row.project.type == 3">会议代收</div>
                                <div v-if="scope.row.project.type == 4">会议代收+自付</div>
                                <div v-if="scope.row.project.type == 5">赞助</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="应收金额" prop="collect_account" align="center" width="100"></el-table-column>
                        <el-table-column label="已回金额" prop="return_account" align="center" width="100"></el-table-column>
                        <el-table-column label="未回款金额" prop="not_account" align="center" width="100"></el-table-column>
                        <el-table-column label="回款状态" prop="collect_status" align="center" width="100">
                            <template #default="scope">
                                <div v-if="scope.row.collect_status == 1">未回款</div>
                                <div v-if="scope.row.collect_status == 2">部分回款</div>
                                <div v-if="scope.row.collect_status == 3">回款完成</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="计划回款时间" prop="plan_time" align="center" width="100"></el-table-column>
                        <el-table-column label="未回款说明" prop="not_remark" align="center" width="100"></el-table-column>
                        <el-table-column label="项目日期" prop="project.project_time" align="center" width="100"></el-table-column>
                        <el-table-column label="创建日期" prop="create_time" align="center" width="100"></el-table-column>
                        <el-table-column label="操作" fixed="right" align="center" width="120">
                            <template #default="scope">
                                <el-button-group>
                                    <el-button text type="primary" size="small" @click="receivable_table_edit(scope.row, scope.$index)" v-auth="'custom.edit'">编辑</el-button>
                                    <el-popconfirm title="确定删除吗？" @confirm="receivable_table_del(scope.row, scope.$index)">
                                        <template #reference>
                                            <el-button text type="danger" size="small" v-auth="'custom.delete'">删除</el-button>
                                        </template>
                                    </el-popconfirm>
                                    <el-button text type="warning" size="small" @click="receivable_table_payment(scope.row, scope.$index)" v-auth="'custom.edit'">新增回款记录</el-button>
                                </el-button-group>
                            </template>
                        </el-table-column>
                    </scTable>
                </div>
                <div v-if="groupId==4">
                    <el-header>
                        <div class="left-panel">
                            <el-button type="primary" icon="el-icon-plus" @click="invoiceAdd" v-auth="'invoice.add'"></el-button>
                        </div>
                    </el-header>
                    <el-main class="nopadding">
                        <scTable ref="table" row-key="id" :apiObj="invoice" @selection-change="selectionChange" stripe remoteSort remoteFilter border :params="query" height="500">
                            <el-table-column width="1"></el-table-column>
                            <el-table-column type="selection" width="50" reserve-selection align="center"></el-table-column>
                            <el-table-column label="客户编号" prop="customer.apply_code" align="center"></el-table-column>
                            <el-table-column label="开票类型" prop="open_type" align="center">
                                <template #default="scope">
                                    <div v-if="scope.row.open_type == 1">增值税纸质专票</div>
                                    <div v-if="scope.row.open_type == 2">增值税纸质普票</div>
                                    <div v-if="scope.row.open_type == 3">增值税电子普票</div>
                                    <div v-if="scope.row.open_type == 4">增值税电子专票</div>
                                </template>
                            </el-table-column>
                            <el-table-column label="客户抬头" prop="customer_rise" align="center"></el-table-column>
                            <el-table-column label="纳税人识别号" prop="taxpayer_num" align="center"></el-table-column>
                            <el-table-column label="开户行" prop="open_bank" align="center"></el-table-column>
                            <el-table-column label="开票地址" prop="open_address" align="center"></el-table-column>
                            <!-- <el-table-column label="电话" prop="phone" align="center" width="120"></el-table-column>
                            <el-table-column label="邮箱" prop="email" align="center" width="120"></el-table-column>
                            <el-table-column label="收件人" prop="receipt" align="center" width="100"></el-table-column>
                            <el-table-column label="邮寄地址" prop="mail_address" align="center" width="120"></el-table-column>
                            <el-table-column label="手机号" prop="mobile" align="center" width="110"></el-table-column> -->
                            <el-table-column label="操作" fixed="right" align="center" width="120">
                                <template #default="scope">
                                    <el-button-group>
                                        <el-button text type="primary" size="small" @click="invoice_table_edit(scope.row, scope.$index)" v-auth="'invoice.edit'">编辑</el-button>
                                        <el-popconfirm title="确定删除吗？" @confirm="invoice_table_del(scope.row, scope.$index)">
                                            <template #reference>
                                                <el-button text type="danger" size="small" v-auth="'invoice.delete'">删除</el-button>
                                            </template>
                                        </el-popconfirm>
                                    </el-button-group>
                                </template>
                            </el-table-column>
                        </scTable>
                    </el-main>
                </div>
            </el-container>
		</el-form>
	</el-dialog>
    <save-project v-if="dialog.project" ref="projectDialog" @success="handleSuccess" @closed="dialog.project = false" draggable></save-project><!-- 项目新增 -->
    <invoice-save v-if="dialog.invoice" ref="invoiceDialog" @success="handleSuccess" @closed="dialog.invoice = false" draggable></invoice-save><!-- 开票新增 -->
    <save-receivable v-if="dialog.receivable" ref="receivableDialog" @success="handleSuccess" @closed="dialog.receivable = false" draggable></save-receivable><!-- 应收账款 -->
    <pay-collect v-if="dialog.pay" ref="payDialog" @success="handleSuccess" @closed="dialog.pay = false" draggable></pay-collect><!-- 回款信息新增 -->
</template>

<script>
import saveProject from '@/views/project/list/save.vue'
import InvoiceSave from './invoiceSave.vue'
import SaveReceivable from '../../project/receivable/save.vue'
import PayCollect from '@/views/project/receivable/payCollect.vue'
export default {
    components: { saveProject, InvoiceSave, SaveReceivable, PayCollect },
	emits: ['success', 'closed'],
    props:{
        query: { type: String, default: "" },
    },
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '新增客户',
				edit: '编辑客户',
				show: '客户详情'
			},
			visible: false,
			isSaveing: false,
            groupId:"1",
			//表单数据
            form:{
                id:"",
            },
            // 客户详情
			info: {
                apply_code:"",
				company_name: "",
				contacts: "",
				mobile: "",
				hotel: "",
				salesman: "",
                create_time:"",
                update_time:"",
                lasttime:"",
			},
            // 跟进记录
            follow:{
                customer_id:"",
                content:"",
                type:"",
                is_interview:0,
                com_file:"",
                next_time:"",
            },
            project:this.$API.project.project.list,
            invoice:this.$API.client.invoice.list,
            receivable:this.$API.project.receivable.list,
            saletList:[],
            hotelList:[],
            dialog:{
                project:false,
                invoice:false,
                receivable:false,
                pay:false,
            },
            type:"1",
            headnumber: {}
		}
	},
	mounted() {
        this.getUser()
        this.getHotel()
	},
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		//表单注入数据
		async setData(data) {
            this.form.id = data.id
            this.follow.customer_id = data.id
            var res = await this.$API.client.client.detail.get({id:data.id});
            this.info.apply_code = res.data.apply_code
            this.info.company_name = res.data.company_name
            this.info.contacts = res.data.contacts
            this.info.mobile = res.data.mobile
            this.info.hotel = res.data.hotel
            this.info.salesman = Number(res.data.salesman)
            this.info.create_time = res.data.create_time
            this.info.update_time = res.data.update_time
            this.info.lasttime = res.data.lasttime
            this.getRecord(data.id)
		},
        // 销售
        async getUser(){
            var res = await this.$API.system.admin.all.get();
            this.saletList = res.data;
        },
        async getHotel(){
            var res = await this.$API.client.hotel.list.get();
            this.hotelList = res.data.rows;
        },
        // 添加跟进
        submit() {
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res = await this.$API.client.follow.add.post(this.follow);
					this.isSaveing = false;
					if (res.code == 1) {
						this.$message.success("操作成功")
                        // 调记录接口
                        this.getRecord(this.form.id)
					} else {
						this.$alert(res.message, "提示", { type: 'error' })
					}
				} else {
					return false;
				}
			})
		},
        // 跟进详情
        async getRecord(id){
            var res = await this.$API.client.follow.detail.get({id:id});
            console.log(res);
        },
        // 项目选择
        itemAdd(){
            let cusInfo = {
                customer_id:this.form.id,
                customer_name:this.info.company_name
            }
            this.dialog.project = true
			this.$nextTick(() => {
				this.$refs.projectDialog.open('client').customData(cusInfo)
			})
        },
        // 项目编辑
        item_table_edit(row) {
            this.dialog.project = true
			this.$nextTick(() => {
				this.$refs.projectDialog.open('edit').setData(row)
			})
        },
        // 切换项目开票状态
        async changeSwitch(val, row) {
			row.$switch_status = true;
            var res = await this.$API.project.project.update_status.post({
                is_ticket: row.is_ticket,
                id: row.id,
            })
			if (res.code == 1) {
				row.$switch_status = false;
				this.$refs.table.refresh();
				this.$message.success("操作成功");
			} else {
				this.$alert(res.message, "提示", { type: "error" });
			}
		},
        // 开票
        invoiceAdd(){
            let data = {
                id:this.form.id,
                custom_code:this.info.apply_code
            }
            this.dialog.invoice = true
			this.$nextTick(() => {
				this.$refs.invoiceDialog.open('add').setId(data)
			})
        },
        // 开票编辑
        invoice_table_edit(row) {
            this.dialog.invoice = true
			this.$nextTick(() => {
				this.$refs.invoiceDialog.open('edit').setData(row)
			})
        },
        // 开票删除
        async invoice_table_del(row, index) {
			var reqData = {id: row.id}
			var res = await this.$API.client.invoice.delete.post(reqData);
			if (res.code == 1) {
				this.$refs.table.tableData.splice(index, 1);
                this.$refs.table.refresh()
				this.$message.success("删除成功")
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
        receivableAdd(){
            let data = {
                id:this.form.id,
                custom_code:this.info.apply_code
            }
            this.dialog.receivable = true
			this.$nextTick(() => {
				this.$refs.receivableDialog.open('add').setId(data)
			})
        },
        receivable_table_edit(row) {
            this.dialog.receivable = true
			this.$nextTick(() => {
				this.$refs.receivableDialog.open('edit').setData(row)
			})
        },
        async receivable_table_del(row, index) {
			var reqData = {id: row.id}
			var res = await this.$API.project.receivable.delete.post(reqData);
			if (res.code == 1) {
				this.$refs.table.tableData.splice(index, 1);
                this.$refs.table.refresh()
				this.$message.success("删除成功")
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
        receivable_table_payment(row){
            this.dialog.pay = true
            this.$nextTick(() => {
                this.$refs.payDialog.open('edit').setData(row)
            })
        },
        // 数据更新
        handleSuccess(data, mode) {
			if (mode == 'client') {
				this.$refs.table.refresh()
			} else if (mode == 'add') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			}
		},
        tabChange(e){
            if(e ==2){
                this.getNum()
            }
        },
        typeChange(e){
            this.$refs.table.upData({month:e})
        },
        async getNum(){
            let query = {page:1,pageSize:20,company_name:this.info.company_name,month:this.month}
            var res = await this.$API.project.project.list.get(query);
            this.headnumber = res.data.extend
        },
	}
}
</script>

<style></style>
